<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <h1 style="color:red;">hello world</h1>
    &lt;h1 style="color:red;"&gt;hello world&lt;/h1&gt; -->
    <script>
        // render()
        // 操作真实的DOM有缺点:
        // 1. 一个真实DOM对象身上有太多的属性和方法,太笨重
        // 2. 操作真实的DOM会重绘和回流
        // const h1 = document.createElement('h1')
        // console.dir(h1)
        // h1.innerHTML = 'Hello world'
        // document.body.append(h1)

        // vue中有一个东西叫虚拟dom


        // 什么是虚拟dom:虚拟dom就是一个普通的对象,它用来描述一个真实的dom
        // const VNode = {
        //     tagName: 'h1',
        //     props: {
        //         className: 'abc'
        //     },
        //     children: ['hello world']
        // }

        // 页面初始化的时候,我们vue脚手架会把template模板编译成render函数,然后render函数会执行得到一个虚拟dom树
        // 然后当业务逻辑操作让data中数据发生改变的时候,render函数会重新渲染得到一个新的虚拟dom树
        // 新旧虚拟dom就开始找不同,把不同的地方在真实的DOM树上打补丁



        // 1. 什么是虚拟dom
        // 虚拟dom就是一个普通的js对象,用来描述一个真实的dom,为什么要有虚拟dom,因为真实的dom操作起
        // 来性能太低(dom对象本身很大,dom会涉及到重绘和回流)



        // diff比较的时候是同层比较 时间复杂度是o(n)

        // 几种情况
        // 1. 二个都是根元素 如果标签名一样 只有属性或内容不一样,元素不动,只是把属性和内容换一下就行了
        // 2. 二个都是根元素,如果标签名不一样,这块整个重建,后代没有必要比较
        // 3. 同层有多个元素的时候
        //     1. 标签身上没有key 就按先后顺序(下标) 如果标签名一样直接复用
        //     2. 标签身上有key,但是key是索引,和上面一样的(写不写key没区别)
        //     3. 标签身上有key,key是id值 就根据di去对应比较


        

    //    就地复用:两个节点是在同一个位置,标签名一样就会被认为是同一个节点 

    







        // 虚拟dom 
        // diff算法 
        // key (没有key,有key 索引 有key是id )

    </script>
</body>

</html>